<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./uploadifive.css">
  <style>
  .btn{
    background: #3176dc!important;
  }
  </style>
</head>

<body>
  <input type="file" name="file_upload" id="file_upload" />
  <a href="http://www.uploadify.com/documentation/">具体的API参照官网</a>
  <a href="https://blog.csdn.net/u010496966/article/details/83380849">中文API总结</a>
  


  <script src="./jquery.js"></script>
  <script src="./jquery.uploadifive.js"></script>


  <script>
    $('#file_upload').uploadifive({
      'auto': true, //是否自动上传，默认true
      'multi': true,
      'dnd': true, //拖放
      'buttonClass': 'btn', //对按钮样式做修改
      'uploadScript': './demo2.jsp', // 服务器处理地址
      'cancelImg': '../JS/uploadifive/uploadifive-cancel.png',//取消上传图片
      'itemTemplate': '<div class="uploadifive-queue-item">\
             <a class="close" href="#">X</a>\
             <div><span class="filename"></span><span class="fileinfo"></span></div>\
             <div class="progress">\
                 <div class="progress-bar"></div>\
             </div>\
         </div>',   //指定上传队列的html,可以决定文件名字，文件大小，取消按钮，进度条是否存在
      //'checkExisting': 'url',
      'buttonText': "请选择文件", //按钮文字
      'truncateLength':1,  //截断文件名字符
      'height': 30, //按钮高度
      'width': 120, //按钮宽度
      'fileSizeLimit': "2GB", //上传文件的大小限制 0则表示无限制
      'uploadLimit': 5, //允许的最大上传文件数
      'queueSizeLimit': 5, //一次可以在队列中拥有的最大文件数
      'fileType': ['image/jpeg','video/mp4','image/png'] , //文件类型(mime类型)，要允许所有文件，请将此值设置为false，多个类型使用数组形式['image/jpeg','video/mp4'] 
      //'formData': { "imgType": "normal" }, //定义文件上传时需要提交给服务器端的参数
      'overrideEvents': ['onDialogClose', 'onError'], //onDialogClose 取消自带的错误提示
      'onFallback': function () { //如果浏览器没有兼容的HTML5文件API功能，则在初始化期间触发
        alert('浏览器不支持HTML5,无法上传！');
      },
      'onSelect': function (
      queue) { //选择的每个文件触发一次，无论它是否返回和错误。cancelled:文件数量取消（未替换） count:队列中的文件总数   errors:返回错误的文件数  queued:添加到队列的文件数  replaced:文件替换的数量 selected:所选文件的数量
        //return false;
      },
      'onDrop': function (file, fileDropCount) {  //将文件放到文件队列时触发
        console.log(file, fileDropCount)
      },   
      'onAddQueueItem': function (file) {    //将一个新文件添加到上传队列时触发
        alert('The file ' + file.type + ' was added to the queue!');
      },
      'onClearQueue': function (queue) {

      },
      'onCancel': function (file) {  //设置onCancel选项，在文件上传被取消时，将允许运行一个自定义函数
        alert('The file ' + file.name + ' was cancelled!');
      },
      'onCheck': function (file, exists) {
        if (exists) {
          alert('The file ' + file.name + ' exists on the server.');
        }
      },
      'onError': function (errorType, file) {
        if (file != 0) {
          var settings = $('#file_upload').data('uploadifive').settings;
          switch (errorType) {
            case 'UPLOAD_LIMIT_EXCEEDED':
              alert("上传的文件数量已经超出系统限制的" + settings.queueSizeLimit + "个文件！");
              break;
            case 'FILE_SIZE_LIMIT_EXCEEDED':
             alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadifive('settings',
                'fileSizeLimit') + "大小！");
              break;
            case 'QUEUE_LIMIT_EXCEEDED':
             alert("任务数量超出队列限制");
              break;
            case 'FORBIDDEN_FILE_TYPE':
             alert("文件 [" + file.name + "] 类型不正确！");
              break;
            case '404_FILE_NOT_FOUND':
             alert("文件未上传成功或服务器存放文件的文件夹不存在");
              break;
          }
        }
      },
      //'onProgress': function (file, e) {  //每次文件上传都有进度更新时触发 e:事件(lengthComputable:布尔值，指示文件的长度是否可计算    loaded:加载的btyes数  total:要加载的总字节数  )
      //},
      'onUpload': function (filesToUpload) { //在使用upload方法调用的上载操作期间触发一次  filesToUpload:需要上传的文件数
        if (filesToUpload < 1) {
          alert("未选择任何文件");
          return false;
        }
      },
      'onUploadFile': function (file) { //每次启动的文件上载都会触发一次。file:正在上载的文件对象
        $('#file_upload').data('uploadifive').settings.formData = {
          id: id,
          point: point,
          type: type,
          oldFile: name
        }; //动态更改formData的值
      },
      'onUploadComplete': function (file, data) { //每一个文件上传完成都会触发该事件，不管是上传成功还是上传失败
        alert("上传成功");
        if (data) {
          try {
            data = JSON.parse(data);
            if (data.result === true) {
              name = data.msg;
              alert("上传成功");
            } else {
              alert(data.msg);
            }
          } catch (e) {
            alert(data);
          }
        }
      },
      'onQueueComplete': function (
      uploads) { //队列中的所有文件完成上传后触发。attempts:在上次上载操作中尝试的文件上载次数    successful:上次上载操作中成功上载文件的数量  errors:在上次上载操作中返回错误的文件上载数  count:从此UploadiFive实例上载的文件总数

      }
    });
  </script>
</body>

</html>